<template>
  <div class="container">
    <el-card>
      <el-tree :data="departmentTree" :props="{
        children: 'children',
        label: 'name'
      }" default-expand-all>
        <div slot-scope="{  data }" class="tree-node">
          <span class="name">{{ data.name }}</span>
          <span class="manager">{{ data.manager }}</span>
          <el-dropdown class="operator" trigger="click">
            <span>
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>添加子部门</el-dropdown-item>
              <el-dropdown-item>编辑部门</el-dropdown-item>
              <el-dropdown-item>删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-tree>
    </el-card>
    <div>{{ count }}</div>
  </div>
</template>

<script>
import departmentMixin  from '@/mixins/department'

export default {
  mixins: [
    departmentMixin
  ],
  data() {
    return {
      count: 0,
    }
  },
  created(){
    setInterval(() => {
      this.count++
    }, 1000)
  }

}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/common.scss";

.container {
  @include avatar(20px);
  padding: 16px;

}

.tree-node {
  display: flex;
  width: 100%;
  font-size: 16px;

  .name {
    flex: 1;
  }

  .manager {
    width: 100px;
  }

  .operator {
    font-size: 16px;
  }
}
</style>
